<!-- 默认图片进入可视区域变为选定图片 -->
<template>
    <div>
        <div style="display: flex;overflow: auto;">
            <img style="width: 490px;height: 500px;flex: 1;" v-lazy="item" v-for="item in arr" alt=""><br/>
        </div>
    </div>
</template>
 
<script setup lang='ts'>
import type { Directive } from 'vue'
// 单次引入单文件方法
//glob是懒加载的模式
// let modules = {
//'xxxxx ':()=> import('xxxx')
// }
// globEager静态加载
// import xx from 'xxx'

const imageList: Record<string, { default: string }> = import.meta.glob('../assets/images/*.*', { eager: true })
let arr = Object.values(imageList).map(v => v.default)

let vLazy: Directive<HTMLImageElement, string> = async (el, binding) => {
    let url = await import('../assets/vue.svg')
    el.src = url.default;
    // entries反映当前元素是否在可视区域出现
    let observer = new IntersectionObserver((entries) => {
        console.log(entries[0], el)
        // intersectionRatio当前元素是否在可视区域的面积比例 
        if (entries[0].intersectionRatio > 0 && entries[0].isIntersecting) {
            setTimeout(() => {
                el.src = binding.value;
                observer.unobserve(el)
            }, 1000)
        }
    })
    observer.observe(el)
}

</script>
 
<style scoped lang='sc ss'></style>